<template>
    <a-modal :width="550"
             :title="title"
             destroyOnClose
             @colse="close"
             :maskClosable="false"
             v-model="visible">
        <a-form-model
                ref="ruleForm"
                small
                :model="form"
                :rules="rules"
                :label-col="labelCol"
                :wrapper-col="wrapperCol">
            <a-form-model-item label="用户名称" prop="realName">
                <a-input placeholder="请输入用户名称" v-model="form.realName" />
            </a-form-model-item>
            <a-form-model-item label="联系方式" prop="phone">
                <a-input type="number" placeholder="请输入联系方式" v-model="form.phone" />
            </a-form-model-item>
            <a-form-model-item label="联系地址" prop="address">
                <a-input placeholder="请输入联系地址" v-model="form.address" />
            </a-form-model-item>
<!--            <a-form-model-item label="用户类型" prop="userType">-->

<!--            </a-form-model-item>-->
<!--            <a-form-model-item label="使用状态" prop="userType">-->

<!--            </a-form-model-item>-->
            <a-form-model-item label="备注" prop="remark">
                <a-input type="textarea" placeholder="请输入备注" v-model="form.remark" />
            </a-form-model-item>
<!--            <a-form-model-item label="头像" prop="headImg">-->
<!--                <a-upload-->
<!--                        name="avatar"-->
<!--                        list-type="picture-card"-->
<!--                        class="avatar-uploader"-->
<!--                        :show-upload-list="false"-->
<!--                        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"-->
<!--                        :before-upload="beforeUpload"-->
<!--                        @change="handleChange">-->
<!--                    <img v-if="form.headImg" :src="form.headImg" alt="headImg" />-->
<!--                    <div v-else>-->
<!--                        <a-icon :type="loading ? 'loading' : 'plus'" />-->
<!--                        <div class="ant-upload-text">-->
<!--                            头像-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </a-upload>-->
<!--            </a-form-model-item>-->
        </a-form-model>
        <div slot="footer" class="text-c">
            <a-button @click="close">关闭</a-button>
            <a-button type="primary" :loading="loading" @click="sure">确定</a-button>
        </div>
    </a-modal>
</template>

<script>
    export default {
        data () {
            return {
                title: '新增用户',
                visible: false,
                form: {
                    address: '',
                    headImg: '',
                    phone: '',
                    realName: '',
                    remark: '',
                    userType: 0,
                    id: '',
                },
                labelCol: { span: 4 },
                wrapperCol: { span: 20 },
                rules: {
                    realName: [
                        { required: true, message: '请输入用户名称', trigger: 'blur' },
                    ],
                    phone: [
                        { required: true, message: '请输入联系方式', trigger: 'blur' },
                    ],
                },
                loading: false,
                actionType: null,
            };
        },
        methods: {
            show (data,title,actionType) {
                if (actionType === 1) {
                    this.form = {
                        address: data.address,
                        headImg: data.headImg,
                        phone: data.phone,
                        realName: data.realName,
                        remark: data.remark,
                        userType:  data.userType,
                        id: data.id,
                    };
                }
                this.title = title;
                this.actionType = actionType;
                this.visible = true;
            },
            sure () {
                this.$refs.ruleForm.validate(valid => {
                    if (valid) {
                        this.loading = true;
                        let api = this.actionType === 0 ? this.$api.permission.adduserinfo : this.$api.permission.edituserinfo;
                        let tipMsg = this.actionType === 0 ? '新增成功' : '编辑成功';
                        api(this.form).then(res => {
                            this.loading = false;
                            if (res && res.code !== 200) {
                                this.$message.error(res.errorMsg);
                                return;
                            }
                            this.$message.success(tipMsg);
                            this.$emit('done');
                            this.close();
                        }).catch(err => {
                            this.loading = false;
                            this.$message.error(err.errorMsg);
                        });
                    }
                });
            },
            close () {
                this.form = {
                    address: '',
                    headImg: '',
                    phone: '',
                    realName: '',
                    remark: '',
                    userType: 0,
                    id: '',
                };
                this.loading = false;
                this.title = '';
                this.actionType = null;
                this.visible = false;
            }
        }
    };
</script>

<style scoped lang="scss">

</style>
